<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <script src="asserts/js/jquery-3.6.0.js"></script>
    <script src="asserts/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/css/cloud.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/css/btn.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/css/text.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/css/input.css"/>


    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .waiwei {

            margin: 0 auto;
        }

        .card {
            width: 650px;
            margin: 0 auto;
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 40px;
            padding-bottom: 20px;
            background: linear-gradient(to right,rgba(255,255,255,0.15),transparent);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            border-radius: 12px;
            -webkit-border-radius: 12px;
            color: rgba(255, 255, 255, 0.75);
        }

        .button {
            display: inline-block;
            border-radius: 7px;
            border: none;
            background: #1875FF;
            color: white;
            font-family: inherit;
            text-align: center;
            font-size: 13px;
            box-shadow: 0px 14px 56px -11px #1875FF;
            width: 15em;
            padding: 1em;
            transition: all 0.4s;
            cursor: pointer;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.4s;
        }

        .button span:after {
            content: 'for free';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.7s;
        }

        .button:hover span {
            padding-right: 3.55em;
        }

        .button:hover span:after {
            opacity: 4;
            right: 0;
        }

        /*body {*/
        /*    background: url("http://localhost:8181/AIR/asserts/img/bg.jpg") top left;*/
        /*    background-size: 100%;*/
        /*}*/
    </style>
    <script>

        $(document).ready(function () {
            var pathName=window.document.location.pathname;
            var curWwwPath=window.document.location.href;
            var pos=curWwwPath.indexOf(pathName);
            var prefixUrl=curWwwPath.substring(0,pos);
            console.log("prefixUrl:"+prefixUrl);

            $("#mem_forgetPsw").click(function () {
                alert("忘就忘了吧~")
            });

            $("#yinsi").click(function () {
                alert("你没有隐私")
            });

            $("#l1").click(function () {

                $("#l1").removeClass("active");
                $("#l2").addClass("active");
                $("#psw").addClass("hide");
                $("#sms").removeClass("hide");
            })

            $("#l2").click(function () {

                $("#l2").removeClass("active");
                $("#l1").addClass("active");
                $("#psw").removeClass("hide");
                $("#sms").addClass("hide");
            })

            $("#psw_login").click(function () {

                var openId = $("#openId").val();
                var password = $("#password").val();

                console.log(openId);
                console.log(password);
                if (openId === "" || password === "") {
                    $("#msg3").html("<p>请填写完整。</p>")
                } else {

                    $.ajax({
                        url: prefixUrl+"/signIn",
                        type: "POST",
                        data: {
                            "openId": openId,
                            "password": password
                        },
                        dataType: "json",
                        success: function (data) {
                            console.log("登录返回信息为：");
                            console.log(data);
                            //location.href = "http://localhost:8181/AIR/newTrips.html";
                            if (data.success){
                                location.href = "/choose.html";
                            }else{
                                $("#msg3").html("<p>"+data.msg+"</p>")
                            }
                        }
                    });
                }
            })

            var suo = 1;
            var yzsuo = 0;
            var phone = $("#phone");
            phone.on('input propertychange', function () {//监听文本框
                if (phone.val().length > 10) {
                    suo = 0;
                } else {
                    suo = 1;
                }

            });

            $('#dyn_btn_psw').click(function () {
                if (suo === 0 && yzsuo === 0) {
                    suo = 1;
                    yzsuo = 1;
                    console.log("获取验证码");
                    sendSms(phone.val());
                    var count = 60;
                    var countdown = setInterval(CountDown, 1000);

                    function CountDown() {
                        $('#dyn_btn_psw').attr("disabled", true).html(" " + count + " s").addClass("disabled");
                        if (count === 0) {
                            $("#dyn_btn_psw").html("获取动态密码").removeAttr("disabled").removeClass("disabled");
                            clearInterval(countdown);
                            suo = 0;
                            yzsuo = 0;
                        }
                        count--;
                    }
                } else {
                    console.log("上锁");
                }

            })

            function sendSms(phone) {
                $.ajax({
                    url: prefixUrl+"/sendSms",
                    type: "POST",
                    data: {
                        "phone": phone
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log("验证码返回信息为：");
                        console.log(data);
                    }
                });
            }

            $("#smsm_login").click(function () {
                console.log("点击登录");

                console.log($("#phone").val());
                console.log($("#yz").val());

                if ($("#yz").val()==="" || $("#phone").val()==="") {
                    console.log("没填写");
                    alert("没填写");
                } else {

                    console.log("发送请求");
                    $.ajax({
                        url: prefixUrl+"/signInBySms",
                        type: "POST",
                        data: {
                            "phone": phone.val(),
                            "code": $("#yz").val()
                        },
                        dataType: "json",
                        success: function (data) {
                            console.log("验证码返回信息为：");
                            console.log(data);
                            if (data.success){

                                location.href = "choose.html";
                            }else{
                                $("msg2").html(data.msg);
                            }
                        }
                    });
                }

            })

        });

    </script>
</head>

<body>

<div>
    <div class="frame">
        <div class="plane-container">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                 y="0px"
                 width="1131.53px" height="379.304px" viewBox="0 0 1131.53 379.304"
                 enable-background="new 0 0 1131.53 379.304"
                 xml:space="preserve" class="plane">
                    <polygon fill="#D8D8D8"
                             points="72.008,0 274.113,140.173 274.113,301.804 390.796,221.102 601.682,367.302 1131.53,0.223  "/>
                <polygon fill="#C4C4C3" points="1131.53,0.223 274.113,140.173 274.113,301.804 390.796,221.102   "/>
            </svg>

        </div>
    </div>
    <div class="clouds">

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud big front slowest">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud distant smaller">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud small slow">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud distant super-slow massive">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud slower">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

    </div>

</div>


<div class="waiwei">

    <div style="height: 150px;"></div>

    <div class="card">

        <h3 style="margin-top: 0px;margin-bottom: 30px;text-align: center">
            <span id="l1" class="text">手机号登录</span>  &nbsp;&nbsp;&nbsp; <span id="l2" class="text">密码登录</span>
        </h3>


<!--        <ul class="nav nav-pills" style="width:auto;margin-bottom: 30px;">-->
<!--            <li id="l1" role="presentation" class="active" style="font-size: 18px">手机号登录&nbsp;&nbsp;&nbsp;&nbsp;</li>-->
<!--            <li id="l2" role="presentation" style="font-size: 18px">密码登录</li>-->
<!--        </ul>-->


        <div id="sms">

            <div class="form-group-lg">
                <input type="text" placeholder="请输入手机号" id="phone" class="pc form-control ">
            </div>
            <br>

            <div class="form-group-lg">

                <div class="input-group">
                    <input type="text" id="yz" placeholder="请输入验证码" class="pc form-control">
                    <div class="yzm input-group-addon" id="dyn_btn_psw" >获取验证码</div>
                </div>


            </div>

            <div>
                <center><p id="msg2"></p>

                    <div class="btn btnb" id="smsm_login" >
                        <a href="#" class="xz">登录</a>
                    </div>

                    <div class="btn btnb" id="z">
                        <a href="res.html" class="xz">注册</a>
                    </div>

<!--                    <button class="button" style="vertical-align:middle" type="button" id="smsm_login"><span>登 录</span></button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                    <a href="res.html">-->
<!--                        <button type="button" class="button"><span>注册</span></button>-->
<!--                    </a>-->
                </center>
            </div>


        </div>

        <div id="psw" class="hide">

            <div class="form-group-lg">
                <input type="text" placeholder="手机号/邮箱/证件号" id="openId" class="pc form-control">
            </div>
            <br>

            <div class="form-group-lg">
                <input placeholder="密码" type="password" id="password" class="pc form-control">
            </div>
            <br>

            <center>
<p id="msg3"></p>
                <div class="btn btnb" id="psw_login" >
                    <a href="#" class="xz">登录</a>
                </div>

                <div class="btn btnb" id="zz">
                    <a href="res.html" class="xz">注册</a>
                </div>


<!--                <button  id="psw_login" class="button" style="vertical-align:middle" type="button">登 录</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <a href="res.html">-->
<!--                    <button type="button" class="button">注册</button>-->
<!--                </a>-->
            </center>

        </div>


    </div>

</div>

</body>


</html>